<template>
  <div>
    <header class="headerfixed">
      <div class="lef" @click="debugesr">本地预览</div>
      <div class="ri">发送</div>
    </header>
    <group class="contenbox">
      <cell title="标题" is-link :border-intent="false" :arrow-direction="showContent002 ? 'up' : 'down'" @click.native="showContent002 = !showContent002"></cell>
      <div v-show="showContent002">
        <x-input placeholder="标题内容"  placeholder-align="center"  v-model="h1value"></x-input>
      </div>

      <cell title="封面上传" value="建议比例 2 : 1 " is-link :border-intent="false" :arrow-direction="showContent001 ? 'up' : 'down'" @click.native="showContent001 = !showContent001"></cell>

      <div v-show="showContent001" class="updimgbox">
        <img :src="imgs"  @click="inputfile" class="imgssl">
        <input type="file" id="csss"  @change='add_img' accept="image/*"  ref="inpts" style="display: none" />
      </div>

      <cell title="文章内容" value="立即编辑"  :border-intent="false" :arrow-direction="showContent003 ? 'up' : 'down'" @click.native="showContent003 = !showContent003"></cell>

      <div v-show="showContent003">
        <x-textarea autosize  placeholder="文章内容...."  v-model="textconten"  :show-counter="false"></x-textarea>
      </div>
    </group>
    <div class="jqimgsfixed" v-if="showjq">
      <vueCropper
                ref="cropper2"
                :img="example2.img"
                :outputSize="example2.size"
                :outputType="example2.outputType"
                :info="example2.info"
                :canScale="example2.canScale"
                :autoCrop="example2.autoCrop"
                :autoCropWidth="example2.width"
                :autoCropHeight="example2.height"
              ></vueCropper>
      <div class="bottombox">
        <div class="boxs">
          <span class="exit" @click="clearCrops">取消</span>
        </div>
        <div class="boxs" style="text-align: right">
          <span class="jq" @click="startCrops">剪切</span>
        </div>
      </div>
    </div>

  </div>

</template>
<script>
import {Cell, Group, XTextarea,XInput }  from 'vux'
import VueCropper from 'vue-cropper'

export default {
  components: {
    Cell,
     Group,
      XTextarea,
      XInput,
      VueCropper
      // Data
  },
  data () {
    return {
      showjq:false,
        example2: {
        img: this.$store.state.configs.ot,
        info: true,
        size: 1,
        outputType: 'jpeg',
        canScale: true,
        autoCrop: true,
        // 只有自动截图开启 宽度高度才生效
        autoCropWidth: 300,
        autoCropHeight: 250,
        // 开启宽度和高度比例
        fixed: true,
        fixedNumber: [4, 3]
      },
      textconten:"",  //内容
      imgs:this.$store.state.configs.ot, //图片
      h1value:"",  //标题
      showContent001: false,
      showContent002: true,
      showContent003: false
    }
  },
   methods: {
    add_img(event){
      // alert("F")
      var reader =new FileReader();
       var img1=event.target.files[0];
       reader.readAsDataURL(img1);
       var that=this;
        that.showjq=true;
       reader.onloadend=function(){
        // that.imgs=reader.result;
        // alert("F")
        that.example2.img=reader.result;
          // console.log(that.example2)
           // that.imgs.push(reader.result)
       }
    },
    inputfile: function (event) {
      document.getElementById("csss").click();
      this.$refs.inpts.click();
    },
    startCrops(){  //生成截图
        // alert("F")
         this.$refs.cropper2.startCrop()
     this.$refs.cropper2.getCropData((data) => {
       this.imgs=data;
      this.showjq=false;
      this.$refs.cropper2.clearCrop();
      console.log(data)
      })
        this.$refs.cropper2.startCrop()
    },
    clearCrops(){
        this.$refs.cropper2.clearCrop();
        this.showjq=false;
    },
    debugesr(){//本地预览
      let detasdebugger={};
      detasdebugger.h1value=this.h1value;
      detasdebugger.imgs=this.imgs;
      detasdebugger.textconten=this.textconten;
      localStorage.detasdedata=JSON.stringify(detasdebugger);
      // alert("F")

     this.$router.push({path: '/datascont', query: {debuge: "true"}});
    }
  }
}
 </script>

<style lang="scss">
.jqimgsfixed {
  position:fixed;
  left:0;
  top: 0;
  right:0;
  bottom: 0;
  width:100%;
  height:100%;
  z-index: 10000;
  .bottombox {
    z-index: 10001;
    position:fixed;
    bottom:0;
    left:0;
    color:#fff;
    width:100%;
    background-color: #000;
    line-height: 50px;
    text-align: center;
    display:flex;
    // padding: 0 15px;
    .boxs {
      flex:1;
      text-align: left;
      // padding-bottom: 15px;
      .exit {
        // text-align: left;
        padding-left: 15px;
      }
      .jq {
        padding-right: 15px;
      }
    }
  }
}
.headerfixed {
  position:fixed;
  left:0;
  top: 0;
  z-index: 100;
  width:100%;
  height:45px;
  display:flex;
  background-color: #1ACBBB;
  color:#fff;
  line-height: 45px;
  font-size: 15px;
  .lef {
    padding-left: 15px;
    flex:1;
    text-align: left;
  }
  .ri {
    flex:1;
    padding-right: 15px;
    text-align: right
  }
}
.headerfixed~.contenbox {
  padding-top: 45px;
}
  .weui-cell_access .weui-cell__ft {
    font-size: 12px;
    padding-right: 20px!important;
  }
  .weui-cells {
    margin-top: 0!important;
  }
  .updimgbox {
    border-top: 1px solid #e5e5e5;
    padding: 15px;
    .imgssl {
      width: 100%;
      min-width: 100%;
      min-height: 100px;
      max-height: 183px;
    }
  }
</style>
